import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

class TodoItem extends Component {

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    // 这里的 nextProps 和 nextState 分别指的是接下来props会变化成什么样和接下来的state会变化成什么样
    shouldComponentUpdate(nextProps, nextState) {
        // 如果从父组件传过来的 content 内容没有发生变化，则不需要更新return false，否则就是更新了，return true
        if (nextProps.content !== this.props.content) {
            return true;
        } else {
            return false;
        }
    }

    render() {
        // 使用解构赋值来优化
        const { content } = this.props;
        return (
            <Fragment>
                {/*<div onClick={this.handleClick}>
                    {this.props.content}
                </div>
                下面这种写法等价于上面(下面3行加上面的const的结构赋值定义*/}
                <div onClick={this.handleClick}>
                    {content}
                </div>
            </Fragment>
        )
    }
    handleClick() {
        // 使用解构赋值来优化
        const { deleteItem, index } = this.props;
        deleteItem(index);
        // this.props.deleteItem(this.props.index)
    }
}

// 对属性做强校验 
TodoItem.propTypes = {
    // 这里的意思是 content 必须是string类型
    content: PropTypes.string,
    deleteItem: PropTypes.func,
    index: PropTypes.number
}
export default TodoItem;